<template>
  <div class="comment-reply">
      <!-- 头部信息 -->
      <van-nav-bar :title="`${comment.reply_count}条回复`">
          <van-icon 
            slot="left" 
            name="cross"
            @click="$emit('close')"
          />
      </van-nav-bar>

      <!-- 当前评论项 -->
      <comment-item :comment="comment"/>

      <!-- 所有评论的回复 -->
      <van-cell title="评论回复"></van-cell>
      <comment-list 
        :source="comment.com_id"
        type="c"
        :list="commentList"
      />

      <!-- 底部区域 -->
      <div class="ariticle-bottom">
        <van-button
            class="coment-btn"
            type="default"
            round
            size="small"
            @click="isReplyShow = true"
        >
            写评论
        </van-button>
      </div>
      <!-- 发布评论回复的弹出层 -->
       <van-popup 
            v-model="isReplyShow" 
            position="bottom"  
        >
            <post-comment 
                :target="comment.com_id"
                :article-id="articleId"
                @post-success="onPostSuccess"
            />
        </van-popup>
  </div>
</template>

<script>
import CommentItem from './comment-item'
import CommentList from './comment-list'
import PostComment from './post-comment'

export default {
  name: 'CommentReply',
  components: {
      CommentItem,
      CommentList,
      PostComment
  },
  props: {
      // 查看回复的评论
      comment: {
          type: Object,
          require: true
      },
      articleId: {
          type: [Number, String, Object],
          require: true
      }
  },
  data() {
    return {
        isReplyShow: false,
        commentList: [] // 评论的回复列表
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
      onPostSuccess(comment) {
          console.log(comment);
          // 把发布成功的评论放到列表的顶部
          this.commentList.unshift(comment)
        //   console.log(this.commentList);
           // 更新评论的回复数量
          this.comment.reply_count++
          // 关闭发布回复的弹出层
          this.isReplyShow = false
      }
  }
};
</script>
<style lang="less" scoped>
.ariticle-bottom {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        box-sizing: border-box;
        height: 44px;
        border-top: 1px solid #d8d8d8;
        background-color: #fff;
        /deep/ .van-button {
            width: 200px !important;
            // height: 23px;
            // border: 1px solid #eeeeee;
            // font-size: 15px;
            // line-height: 23px;
            color: #a7a7a7;
        }
    }
</style>